<template>
  <div class="index">
    <div class="left">
      <img src="../assets/images/index.jpg" style="width: 800px; height: 1000px;float: left;">
    </div>

    <div class="right" style="width: 900px;height: 1000px;float: left;">
      <div class="right-center" style="
            border:2px solid darkslategray;
            box-shadow: darkgrey 10px 10px 30px 5px ;
            border-radius:20px;
            width:370px;height:500px;position: absolute;left: 63%;top: 23%;">

        <div style="color: black;font-size: 20px;text-align: left;margin-top: 80px;margin-left: 30px">管理员登陆</div>

        <el-form ref="form" :model="form":rules="rules" style="width: 300px;margin-left: 30px;;margin-top: 40px">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button style="width: 100%" type="info" @click="login">登陆</el-button>
          </el-form-item>
          <el-form-item >
            <el-button style="width: 100%" type="info" @click="$router.push('/Login')">返回</el-button>
          </el-form-item>

        </el-form>

      </div>
    </div>
  </div>


</template>

<script>
import request from "../utils/request";

export default {
  name: "Login",
  data(){
    return {
      form:{},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    login()
    {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          request.post("/admin/login",this.form).then(res => {
            if(res.code === '0'){
              this.$message({
                type:"success",
                message:"登陆成功"
              })
              sessionStorage.setItem("admin",JSON.stringify(res.data))//缓存用户信息

              /*console.log(this.data().records.zset);*/

              this.$router.push("/User")

            }else {
              this.$message({
                type:"error",
                message:res.msg
              })
            }
          })
        }
      })

    }
  }

}
</script>

<style scoped>

</style>